<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格案例(table case exercise)</title>
  <!-- 
    HTML中的表格（Table）是一种用于展示数据的常见元素，可以通过HTML和CSS来创建和样式化表格。以下是关于HTML和CSS表格的主要要点： 
 
      1. 表格结构：使用 <table> 标签定义表格， <tr> 标签定义表格行， <th> 标签定义表头单元格， <td> 标签定义数据单元格。 
      2. 表格标题：使用 <caption> 标签可以为表格添加标题，通常位于表格顶部。 
      3. 表头和数据：使用 <th> 标签定义表头单元格，通常加粗居中显示；使用 <td> 标签定义数据单元格，通常左对齐显示。 
      4. 合并单元格：使用 rowspan 和 colspan 属性可以合并表格中的单元格，实现跨行或跨列显示。 
      5. 表格样式：使用CSS样式可以自定义表格的外观，如设置边框样式、背景颜色、字体样式等。 
      6. 表格布局：使用CSS布局技巧可以控制表格的宽度、对齐方式和间距，实现灵活的表格布局。 
      7. 响应式表格：通过设置表格的 overflow 属性或使用媒体查询可以实现表格在不同设备上的响应式显示。 
      8. 表格边框：使用 border 属性可以设置表格的边框样式和宽度，通过CSS样式可以进一步美化表格边框。 

    补充: border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。
      1. 合并（collapsed）模式下，表格中相邻单元格共享边框。在这种模式下，CSS 属性border-style 的值 inset 表现为槽，值 outset 表现为脊。

      2. 分隔（*separated）*模式是 HTML 表格的传统模式。相邻单元格都拥有不同的边框。边框之间的距离是通过 CSS 属性 border-spacing 来确定的。
   -->
   <style>
     table {
       text-align: center;
       border-collapse: collapse;
     }

     table td {
       border: 1px solid #ccc;
       padding: 8px;
     }

     table tr:nth-child(1) {
       font-weight: bold;
       background-color: #f2f2f2;
     }

     table > tbody > tr:nth-child(1) {
      color: skyblue;
      font-weight: 700;
    }
   </style>
</head>
<body>

  <!-- 普通 -->
  <table>
    <tr>
      <td>排名</td>
      <td>名称</td>
      <td>价格</td>
      <td>库存</td>
      <td>销量</td>
    </tr>
    <tr>
      <td>1</td>
      <td>苹果手机</td>
      <td>5999</td>
      <td>1000</td>
      <td>1000</td>
    </tr>
    <tr>
      <td>2</td>
      <td>小米手机</td>
      <td>3999</td>
      <td>1000</td>
      <td>1000</td>
    </tr>
    <tr>
      <td>3</td>
      <td>华为手机</td>
      <td>4999</td>
      <td>1000</td>
      <td>1000</td>
    </tr>
  </table>

  <!-- 完整 -->
  <table>
    <caption>手机排名</caption>
    <thead>
      <tr>
        <td>排名</td>
        <td>名称</td>
        <td>价格</td>
        <td>库存</td>
        <td>销量</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>苹果手机</td>
        <td>5999</td>
        <td>1000</td>
        <td>1000</td>
      </tr>
      <tr>
        <td>2</td>
        <td>小米手机</td>
        <td>3999</td>
        <td>1000</td>
        <td>1000</td>
      </tr>
      <tr>
        <td>3</td>
        <td>华为手机</td>
        <td>4999</td>
        <td>1000</td>
        <td>1000</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>其他</td>
        <td>其他</td>
        <td>其他</td>
        <td>其他</td>
        <td>其他</td>
      </tr>
    </tfoot>
  </table>
  
</body>
</html>